<template>
  <span v-if="tag === 'span'">{{ translatedText }}</span>
  <p v-else-if="tag === 'p'">{{ translatedText }}</p>
  <div v-else-if="tag === 'div'">{{ translatedText }}</div>
  <h1 v-else-if="tag === 'h1'">{{ translatedText }}</h1>
  <h2 v-else-if="tag === 'h2'">{{ translatedText }}</h2>
  <h3 v-else-if="tag === 'h3'">{{ translatedText }}</h3>
  <h4 v-else-if="tag === 'h4'">{{ translatedText }}</h4>
  <h5 v-else-if="tag === 'h5'">{{ translatedText }}</h5>
  <h6 v-else-if="tag === 'h6'">{{ translatedText }}</h6>
  <label v-else-if="tag === 'label'">{{ translatedText }}</label>
  <button v-else-if="tag === 'button'">{{ translatedText }}</button>
  <span v-else>{{ translatedText }}</span>
</template>

<script setup>
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { t, getCurrentLanguage, LANGUAGES, diagnoseTranslationSystem } from '@/utils/i18n'

const props = defineProps({
  // 国际化键名
  keyName: {
    type: String,
    required: true
  },
  
  // 参数对象，用于替换翻译文本中的参数
  params: {
    type: Object,
    default: () => ({})
  },
  
  // HTML标签
  tag: {
    type: String,
    default: 'span',
    validator: (value) => {
      const validTags = [
        'span', 'p', 'div', 
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        'label', 'button'
      ];
      const isValid = validTags.includes(value);
      if (!isValid) {
        // console.warn(`无效的标签类型: ${value}，将使用默认标签 'span'`);
      }
      return isValid;
    }
  }
})

// 当前语言
const currentLang = ref(getCurrentLanguage())

// 翻译后的文本
const translatedText = computed(() => {
  try {
    if (!props.keyName) {
      // console.error('[Translate] 错误: 未提供翻译键名');
      return '翻译键错误';
    }
    
    const result = t(props.keyName, props.params);
    
    if (result === props.keyName) {
      // console.warn(`[Translate] 警告: 键 "${props.keyName}" 未找到翻译`);
    } else {
      // console.log(`[Translate] 翻译成功: "${result}"`);
    }
    
    return result;
  } catch (error) {
    // console.error(`[Translate] 翻译出错:`, error);
    return `翻译错误: ${props.keyName}`;
  }
})

// 语言变化事件处理函数
const handleLanguageChange = (event) => {
  if (event.detail && event.detail.lang) {
    currentLang.value = event.detail.lang;
  } else {
    // console.warn('[Translate] 语言变化事件数据不完整');
  }
}

// 监听语言变化事件
onMounted(() => {
  document.addEventListener('language-changed', handleLanguageChange);
  
  // 在开发环境下运行诊断
  if (process.env.NODE_ENV === 'development') {
    try {
      const diagResult = diagnoseTranslationSystem();
    } catch (e) {
      // console.warn('[Translate] 诊断失败:', e);
    }
  }
})

// 移除事件监听器
onBeforeUnmount(() => {
  document.removeEventListener('language-changed', handleLanguageChange);
})
</script> 